<script setup lang="ts">
import { InsightItem, InsightStatus } from '@/models/user-info'
import _ from 'lodash'
import UseButton from '@/components/use-btn/index.vue'
import UseFixedBottom from '@/components/use-fixed-bottom/index.vue'
import { awaitTo } from '@/utils'
import { editUserPortraitSubmit } from '@/service/index/user-info'

const props = withDefaults(
  defineProps<{
    refresh: () => void
  }>(),
  {},
)

const show = ref(false)

const detailData = ref<InsightItem>({
  id: 0,
  corp_id: 0,
  user_id: 0,
  customer_id: 0,
  date: '',
  student_id: 0,
  status: InsightStatus.Unconfirmed,
  status_label: '',
  created_at: '',
  updated_at: '',
  customer: undefined,
  user_insights: [],
  user_profiles: [],
  students: [],
  student_name: '',
})
function open(data: InsightItem) {
  detailData.value = _.cloneDeep(data)
  show.value = true
}

defineExpose({
  open,
})

const customStyle = 'height: 60vh;border-radius: 24rpx 24rpx 0 0;background: #ffffff;'

function close() {
  show.value = false
}

async function submit() {
  for (const key in detailData.value.user_profiles) {
    const _item = detailData.value.user_profiles[key]

    if (_item.value === '') {
      uni.showToast({
        title: '请填写完整',
        icon: 'error',
      })
      return
    }
  }
  uni.showLoading({
    title: '保存中',
  })
  const { result } = await awaitTo(
    editUserPortraitSubmit({
      list: detailData.value?.user_profiles,
    }),
  )
  if (result) {
    uni.showToast({
      title: '保存成功',
      icon: 'success',
    })
    show.value = false
    props.refresh()
  }
}

const isFocus = ref(false)
</script>

<template>
  <view>
    <page-meta :page-style="`overflow:${show ? 'hidden' : 'visible'};`"></page-meta>
    <wd-popup position="bottom" v-model="show" :custom-style="customStyle">
      <view class="relative">
        <view class="title">
          <view class="w-5"></view>
          <view>编辑用户画像</view>
          <wd-icon name="close" size="32rpx" @click="close"></wd-icon>
        </view>
        <scroll-view
          class="scroll-views"
          scroll-y
          :style="`height: calc(100% - 330rpx);`"
          :scroll-with-animation="true"
        >
          <view class="card">
            <view class="h-2"></view>
            <view v-for="item in detailData.user_profiles" :key="item.id">
              <view style="margin-bottom: 20rpx">{{ item.field }}</view>
              <view class="inputs" style="background: #f8f9fb">
                <textarea
                  v-model="item.value"
                  auto-height
                  style="min-height: 45rpx"
                  placeholder="请输入"
                ></textarea>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <UseFixedBottom is-fixed :boxHeight="150">
        <view class="pl-4 pr-4">
          <UseButton @click="submit">保存</UseButton>
        </view>
      </UseFixedBottom>
    </wd-popup>
  </view>
</template>

<style lang="scss" scoped>
.card {
  padding: 30rpx;
  .label {
    margin-bottom: 20rpx;
    font-size: 25rpx;
    color: #6a707c;
  }
  .icons {
    display: flex;
    justify-content: flex-end;
  }
  .inputs {
    position: relative;
    box-sizing: border-box;
    padding: 24rpx;
    margin-bottom: 24rpx;
    font-size: 28rpx;
    color: #2b2f36;
    background: #f8f8f8;
    border: 2rpx solid #f8f8f8;
    border-radius: 16rpx;
    textarea {
      width: 100%;
      height: 40rpx;
    }
  }
}
.title {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 106rpx;
  padding: 0 24rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 32rpx;
  font-weight: 500;
  color: #2b2f36;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}
</style>
